{extend name="layout/index" /}
{block name="title"}
<title>观看直播效果</title>
<head>
<link rel="stylesheet" type="text/css" href="http://www.52player.com/Demos/Images/common.css">
<link rel="stylesheet" type="text/css" href="http://www.52player.com/Demos/Images/style.css">
<style type="text/css">
		   *{margin:0;padding:0;list-style:none;}
			body{background:#fff;font:normal 12px/22px "Microsoft YaHei",宋体;}
			img{border:0;}
			a{text-decoration:none;color:#333;}
			a:hover{color:#1974A1;}
			.tabox{width:100%;margin:0px auto;border-top:2px solid #5a98c3;}
			.tabox .hd{overflow:hidden;background:url(../images/bg.png) 0 -3px #efefef;border-left:1px solid #ddd;}
			.tabox .hd li{position:relative;margin-left:-1px;height:37px;line-height:37px;text-align:center;width:50%;float:left;border:1px solid #ddd;border-top:0;font:normal 14px/37px "Microsoft YaHei";_font-weight:bold;cursor:default;margin-right: 1px;}
			.tabox .hd li.on{width: 50%;background:#fff;border-bottom:1px solid #fff;color:#5a98c3;margin-right: 1px;}
			.tabox .bd{height:auto;.tabox .lh li .p-nameborder:1px solid #ddd;border-top:0;}
			.tabox .lh{overflow:hidden;width: 100%; }
			.tabox .lh li{padding-left: 10px; float:left; width: 45%; height: 221px;margin: 0 auto;}
			.tabox .lh li .p-img{width:130px;height:132px;padding:30px 13px 0 13px;margin:0 auto;text-align:center; width: 130px; height: 130px; margin: 0 auto;}
			.tabox .lh li .p-img img{width: 100%; height: 100%;}
			.tabox .lh li .p-name{line-height:18px;word-break:break-all;word-wrap:break-word;overflow:hidden; text-align: center;  height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
			.tabox .lh li .p-price{color:#999; }
			.tabox .lh li .p-price strong{color:#5a98c3;font-size:14px;font-family:verdana;}
			.tabox .bd .bd_record {width:100%;float: left; text-align: left; margin: 10px 10px;}
			.buttonsitUP input{ margin:0 5%;}
</style>

</head>
{/block}
{block name="adminUser"}
<a href="#" data-toggle="dropdown">
	<img src="/admin/images/user-4.png" alt="user-image" class="img-circle img-inline userpic-32" width="28" />
	<span>
		{$adminUser}
		<i class="fa-angle-down"></i>
	</span>
</a>
{/block}
{block name="content"}
		<div class="panel panel-default" style="width:90%;min-height: 1000px;overflow: auto;">
			<div class="panel-heading">
				<h3 class="panel-title">观看直播效果</h3>
				<div class="panel-options">
					<a href="#" data-toggle="panel">
						<span class="collapse-icon">&ndash;</span>
						<span class="expand-icon">+</span>
					</a>
					<a href="#" data-toggle="remove">
						×
					</a>
				</div>
			</div>

			<div class="panel-body" style="width: 100%">
								<!--maincontent/begin-->
				<div class="maincontent" style="width: 100%;margin-left: ">
				    <div class="cuplayer" style="margin-top:50px;">
			            <fieldset>
						<div class="video" id="HLSPlayer" >
						<SCRIPT LANGUAGE=JavaScript>

						var vID        = ""; 
						var vWidth     = "100%";                
						var vHeight    = 400;                   
						var vPlayer    = "/admin/images/plays/HLSplayer.swf?v=1.5"; 
						var vHLSset    = "/admin/images/plays/HLS.swf";             
						var vPic       = "{$sql[0]['icon_url']}";    
						var vCssurl    = "/admin/images/plays/mini.css";     

						var vHLSurl    = "{$sql[0]['hls_url']}";

						</SCRIPT> 
						<script type="text/javascript" src="/admin/js/hls.min.js?rand=3396fsa778"></script>
						</div>
			            </fieldset>
				    </div>
				</div><!--maincontent/end-->	
			</div>
			<div style="background: #aaaaaa; width: 41.5%;height: 300px; position: absolute;">
				<div style="background: #5a98c3; width: 100%; height: 30px; color: white;line-height: 30px;padding-left: 5px;">主持人控制台</div>
					<div style="height: 15px; padding: 30px 5%; ">
						<div style="float: left;width: 100% ">
							<input id="benneg" type="button" value="全场禁言" style="background: #5a98c3;width:30%; border-style: none;color: white;border-radius: 5px;font-size: 12px; padding: 5px;margin-bottom: 15px "/>
						</div>
						
					</div>
					<div >
						<textarea class="textarea" style="width: 90%; height: 100px; margin-left: 5%;" rows="5" cols="20" placeholder="请输入你要留言的内容：" ></textarea>
					</div>
					<div style="width: 90%; margin-left: 5%; margin-top: 25px; height: 50px; ">
						<input class="button" type="button" value="提交" style="float: right; background: #5a98c3;width:20%; border-style: none;color: white;border-radius: 5px;font-size: 12px; padding: 5px"/>
					</div>
			</div>
			<div class="box-right" style="width: 45%; float: right; ">
			<div class="tabox">
			      <div class="hd">
			        <ul>
			          <li class=" ">座次分配</li>
			          <li class=" ">发言列表</li>
			        </ul>
			      </div>
			      <div class="bd" style="width: 100%;">
				      	<div class="bd_record" style="margin: 0 0; overflow: auto;height: auto;">
				      		<section  class="white_box" style="top: 1rem;" >
							    <div  class="record_list"  id="gift">
							    	<p style="margin: 1rem 0; color:#5a98c3;">座次分配</p>
							    	<span  class="ico_clock"></span>
							    	<div  class="date"></div>
								      <ul class="buttonsit">
								        <li class="buttonsitUP" style="overflow:block;height:320px;" id="zuowei">
								        	
								        </li>
								      </ul>
							    </div>
						    </section>
				      	</div> 
				      	<div class="bd_record" style="margin: 0 0;">
				      		<section  class="white_box" style="top: 1rem;" >
				      			<div  class="record_list"  id="gift">
							     	<p style="margin: 1rem 0; color:#5a98c3;">发言列表</p>
							     	<span  class="ico_clock"></span>
							     	<div  class="date"><span  class="dot"></span></div>
									  <ul id="liaotian">
									   
									  </ul>
								</div>
							</section>
				        </div>
			      </div>
			</div>
		</div>
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/admin/js/jquery.SuperSlidess.js"></script>
	<script type="text/javascript">
		jQuery(".tabox").slide({delayTime: 0});
	</script>
	<input id="token" type="hidden" value=""> 		
		</div>

{/block}
{block name="js"}
<script src="http://cdn.ronghub.com/RongIMLib-2.2.4.min.js"></script>
<script src="http://cdn.ronghub.com/RongIMVoice-2.2.4.min.js"></script> 
<script type="text/javascript">
	//  $.ajax({
 // 	url : "{:url('Chat/getToken')}",
 // 	type: "post",
 // 	async: true,
 // 	success: function(data){
 //     	console.log(data);
 //  	} 	
 // });

RongIMLib.RongIMClient.init("e5t4ouvperk7a");
RongIMLib.RongIMVoice.init();

var chatRoomId = "10001"; // 聊天室 Id。
var count = 10;// 拉取最近聊天最多 50 条。
var counts = 30; // 获取聊天室人数 （范围 0-20 ）
 
var order = RongIMLib.GetChatRoomType.REVERSE;// 排序方式。
 	 // console.log("sss"+token);
var token = "nQ6ttCNqbs0nHsbJ+ESgEk5ZRRA1upo9ZcpS6go5h8UQ9M4Q+ISpbIncfD6IQotwW4VzBt8Z6wp/ux3ULVLCnw==";
 // 连接融云服务器。
  RongIMClient.connect(token, {
    onSuccess: function(userId) {
      console.log("Login successfully." + userId);
    },
    onTokenIncorrect: function() {
      console.log('token无效');
    },
    onError:function(errorCode){
          var info = '';
          switch (errorCode) {
            case RongIMLib.ErrorCode.TIMEOUT:
              info = '超时';
              break;
            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
              info = '未知错误';
              break;
            case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
              info = '不可接受的协议版本';
              break;
            case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
              info = 'appkey不正确';
              break;
            case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
              info = '服务器不可用';
              break;
          }
          console.log(errorCode);
        }
  });
 // 设置连接监听状态 （ status 标识当前连接状态）
 // 连接状态监听器
 RongIMClient.setConnectionStatusListener({
    onChanged: function (status) {
        switch (status) {
            //链接成功
            case RongIMLib.ConnectionStatus.CONNECTED:
                console.log('链接成功');
                //加入聊天室
                RongIMClient.getInstance().joinChatRoom(chatRoomId, count, {
				  onSuccess: function() {
				       alert("加入聊天室成功");
				       //获取聊天室信息
						RongIMClient.getInstance().getChatRoomInfo(chatRoomId, count, order, {
						  onSuccess: function(chatRoom) {
						  		//console.log(chatRoom);
						  		 console.log(chatRoom.userInfos);
						  		var users = chatRoom.userInfos;
						  		$.each(users,function(i,n){
						  			$("#zuowei").append("<input type='button' name='jiejin' class='jiejin' style='height: 10%; width: 10%; background: blue; color:yellow;' value='"+n.id+"' uid='"+n.id+"'>");
						  		})
						  		 
						            
						  		//console.log(chatRoom.userTotalNums);
						       // chatRoom => 聊天室信息。
						    // chatRoom.userInfos => 返回聊天室成员。
						     // chatRoom.userTotalNums => 当前聊天室总人数。
						  },
						  onError: function(error) {
						    // 获取聊天室信息失败。
						    alert("获取聊天室信息失败");
						  }
						});
										  },
				  onError: function(error) {
				  	   alert("加入聊天室失败");
				    // 加入聊天室失败
				  }
				});
                break;
            //正在链接
            case RongIMLib.ConnectionStatus.CONNECTING:
                console.log('正在链接');
                break;
            //重新链接
            case RongIMLib.ConnectionStatus.DISCONNECTED:
                console.log('断开连接');
                break;
            //其他设备登录
            case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                console.log('其他设备登录');
                break;
              //网络不可用
            case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
              console.log('网络不可用');
              break;
            }
    }});


  		// 消息监听器
RongIMClient.setOnReceiveMessageListener({

    // 接收到的消息
    onReceived: function (message) {
    	
        // 判断消息类型
        switch(message.messageType){
            case RongIMClient.MessageType.TextMessage:
        
                   // 发送的消息内容将会被打印
                console.log(message.content);
                var type = message.content.type;
                console.log(type);
                var dianzan = "为您点个赞";
                var jushou = "举手";
                var d = new Date(message.sentTime);
                var time = formatDate(d);
                    // var time = Date(parseInt(message.sentTime) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
                  if(typeof(type) === 'undefined' ){
                    $('#liaotian').append("<li><span  class='dot'><i></i></span><p><span class='fc'><a  style='color:#5a98c3;'>用户"+message.senderUserId+"</a></span></p><p>"+message.content.content+"</p><span  class='time'>"+time+"</span></li>");
                  }else if(type == '1'){
                     $('#liaotian').append("<li><span  class='dot'><i></i></span><p><span class='fc'><a  style='color:#5a98c3;'>用户"+message.senderUserId+"</a></span></p><p>"+dianzan+"</p><span  class='time'>"+time+"</span></li>"); 
                  }else if(type == '2'){
                      $('#liaotian').append("<li><span  class='dot'><i></i></span><p><span class='fc'><a  style='color:#5a98c3;'>用户"+message.senderUserId+"</a></span></p><p>"+jushou+"</p><span  class='time'>"+time+"</span></li>"); 
                  } 	
               
            case RongIMClient.MessageType.VoiceMessage:
                // 对声音进行预加载                
                // message.content.content 格式为 AMR 格式的 base64 码
                RongIMLib.RongIMVoice.preLoaded(message.content.content);
                var d = new Date(message.sentTime);
                var time = formatDate(d);
                $('#liaotian').append("<li><span  class='dot'><i></i></span><p><span class='fc'><a  style='color:#5a98c3;'>用户"+message.senderUserId+"</a></span></p><p><input type='submit' class='bofang' value='点击播放' cid='"+message.content.content+"'></p><span  class='time'>"+time+"</span></li>");
                 // base64Str 格式为 AMR 格式的 base64 码。
                // var base64Str = message.content.content;
                // 音频持续大概时间(秒)
               
                
                break;
            case RongIMClient.MessageType.ImageMessage:
                // do something...
                break;
            case RongIMClient.MessageType.DiscussionNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.LocationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.RichContentMessage:
                // do something...
                break;
            case RongIMClient.MessageType.DiscussionNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.InformationNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.ContactNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.ProfileNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.CommandNotificationMessage:
                // do something...
                break;
            case RongIMClient.MessageType.CommandMessage:
                // do something...
                break;
            case RongIMClient.MessageType.UnknownMessage:
                // do something...
                break;
            default:
                // 自定义消息
                // do something...
        }
    }
});
$('#liaotian').on('click','.bofang',function(){
      var base64Str =  $(this).attr('cid');
      var duration = base64Str.length/1024;
      RongIMLib.RongIMVoice.play(base64Str,duration);
});

$('#benneg').click(function(){
 		$.get("{:url('Chat/benneg')}",function(e){
 			if(e = 1){
 				alert("全场禁言成功");
 				$('#benneg').val("禁言成功");
 			}
 			
 		});
	});
$("#zuowei").on('click','.jiejin',function(){
       var uid = $(this).attr('uid');
       var thiss = $(this);
       $.get("{:url('Chat/jiejin')}",{uid:uid},function(data){
       	  if(data =1){
       	  		alert("解禁成功");
       	  		// thiss.css('background','green');
       	  }else{
       	  	   alert("解禁失败");
       	  }
       });
});
 function   formatDate(now)   {     
      var   year=now.getYear()-100;     
      var   month=now.getMonth()+1;     
      var   date=now.getDate();     
      var   hour=now.getHours();     
      var   minute=now.getMinutes();     
      var   second=now.getSeconds();     
      return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;     
}   
	$('.button').click(function(data){
		var content = $('.textarea').val();

		var msg = new RongIMLib.TextMessage({content:content,extra:"admin"});
        var conversationtype = RongIMLib.ConversationType.CHATROOM; // 私聊,其他会话选择相应的消息类型即可。
        var targetId = "10001"; // 目标 Id
       RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                onSuccess: function (message) {
                    //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                    console.log(message);
                    var d = new Date(message.sentTime);
                    var name = '主持人：';
                    var time = formatDate(d);
                    // var time = Date(parseInt(message.sentTime) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
                    $('#liaotian').append("<li><span  class='dot'><i></i></span><p><span class='fc'><a  style='color:#5a98c3;'>"+name+"</a></span></p><p>"+message.content.content+"</p><span  class='time'>"+time+"</span></li>");
                    $('.textarea').val('');
                 //     var content = message.content.content;
	                // var username = 'admin';
	                // var settime = message.sentTime;

                },
                onError: function (errorCode,message) {
                    var info = '';
                    switch (errorCode) {
                        case RongIMLib.ErrorCode.TIMEOUT:
                            info = '超时';
                            break;
                        case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                            info = '未知错误';
                            break;
                        case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                            info = '在黑名单中，无法向对方发送消息';
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                            info = '不在讨论组中';
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_GROUP:
                            info = '不在群组中';
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                            info = '不在聊天室中';
                            break;
                        default :
                            info = x;
                            break;
                    }
                    alert('发送失败:' + info);
                }
            }
        );
	
	});
 RongIMClient.getInstance().getConversationList({
      onSuccess: function(list) {
        console.log(list);
      },
      onError: function(error) {
         // do something...
      }
    },null);

</script>


{/block}
<!-- {block name="css"}
	<style>
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
	body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
	td,th,caption { font-size:14px; }
	h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
	address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
	a { color:#555; text-decoration:none; }
	a:hover { text-decoration:underline; }
	img { border:none; }
	ol,ul,li { list-style:none; }
	input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
	table { border-collapse:collapse; }
	html {overflow-y: scroll;} 
	.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
	.clearfix { *zoom:1; }

	body{ font-family: "微软雅黑"; background-color: #292929; 	}

	#testBox{
		width: 953px;
		height: 537px;
		margin: 0 auto;
	}
    </style>
<link rel="stylesheet" href="/video/css/fz-video.css">
<link rel="stylesheet" href="/video/font/iconfont.css">
{/block} -->

